<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画板</title>
    <style>
        * {margin: 0;padding: 0;}
        canvas {border: 1px solid gray}
        button:nth-of-type(1) {position: fixed;left: 10px;top: 30px;width: 60px;height: 40px;outline: none;background-color: cyan;color: #fff;border: none;}
        button:nth-of-type(2) {position: fixed;left: 90px;top: 30px;width: 60px;height: 40px;outline: none;background-color: cyan;color: #fff;border: none;}
    </style>
</head>
<body>
    <canvas>换浏览器吧</canvas>
    <button onclick="hs()">换色</button>
    <button onclick="xp()">橡皮擦</button>
</body>
<script>
    var c=document.querySelector('canvas');
    var ctx=c.getContext('2d');
    
    var w=window.innerWidth;
    var h=window.innerHeight;
    c.width=w;
    c.height=h;
    function rand(min,max) {
		return Math.round(Math.random()*(max - min)) + min;
	}
    function rc() {
		var r = rand(0,255);
		var g = rand(0,255);
		var b = rand(0,255);
		return "rgb("+r+","+g+","+b+")";
	}
    var color=rc();
    function hs(){
        color=rc();
        return color;
    }
    //绘制圆
    function huiZhi(x,y){
        ctx.beginPath();
        ctx.arc(x,y,10,0,Math.PI*2,true);
        ctx.fillStyle=color;
        ctx.fill();
    }
    //获取圆心坐标
    var a=0;
    var b=0;
    var arrX=[];
    var arrY=[];
    function weiZhi(){
        document.onmousedown=function(event){
            var e=event||window.event;
            document.onmousemove=function(event){
                var ee=event||window.event;
                a=ee.offsetX;
                b=ee.offsetY;
                huiZhi(a,b);
                arrX.push(a);
                arrY.push(b);
                for(var i=0;i<arrX.length;i++){
                    ctx.beginPath();
                    ctx.moveTo(arrX[arrX.length-2],arrY[arrX.length-2]);
                    ctx.lineTo(arrX[arrX.length-1],arrY[arrX.length-1]);
                    ctx.strokeStyle=color;
                    ctx.lineWidth=20;
                    ctx.stroke();
                }
            }
        }
        document.onmouseup=function(){
            document.onmousemove='';
            arrX=[];
            arrY=[];
        }
    }
    weiZhi()
    function xp(){
        document.onmousedown=function(event){
            var e=event||window.event;
            document.onmousemove=function(event){
                var ee=event||window.event;
                a=ee.clientX;
                b=ee.clientY;
                ctx.clearRect(a,b,50,50)
            }
        }
        document.onmouseup=function(){
            document.onmousemove='';
            weiZhi();
        }
    }
    </script>
</html>










